import {Descriptions, DescriptionsProps, Modal} from "antd";
import React from "react";

// @ts-ignore
export default function DetailModal({open,onClose,app}){
  const items: DescriptionsProps['items'] = [
    {
      key:"appname",
      label:"应用名",
      children:app.appname
    },{
      key:"appTitle",
      label:"应用显示名",
      children:app.appTitle
    },{
      key:"sort",
      label:"排序",
      children:app.sort
    },{
      key:"route",
      label:"路由地址",
      children:app.route
    },{
      key:"icon",
      label:"图标",
      children:app.icon ? <img src={app.icon} alt="avatar" style={{ width: '102px',height:'102px'}} /> : ''
    },{
      key:"description",
      label:"描述",
      labelStyle:{width:130},
      children:app.description
    },{
      key:"attributes",
      label:"扩展属性",
      children:app.attributes
    }
  ]
  return (
    <Modal title={"应用详情"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
           open={open} onCancel={onClose} onOk={onClose}>
      <Descriptions bordered items={items} size={"small"} column={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1, xxl: 1 }}/>
    </Modal>
  );
}